<template>
    <div>
        <div v-loading="fullscreenLoading">
            <div class="header">
                <span>编码：</span>
                <el-input
                    class="keyword"
                    v-model="keyword"
                    size="small"
                    clearable
                    @clear="isSearch = false; getData()"
                ></el-input>
                <el-button type="primary" size="small" @click="isSearch = true; getData()">查询</el-button>
                <el-button type="success" size="small" @click="add">新增</el-button>
            </div>
            <table class="table" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <th>id</th>
                    <th>广告名称</th>
                    <th>广告编码</th>
                    <th>广告描述</th>
                    <th>广告示例图</th>
                    <th>时间</th>
                    <!-- <th>价格</th> -->
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.code}}</td>
                        <td>{{item.description}}</td>
                        <td>
                            <el-image
                                v-if="item.picture"
                                class="img"
                                fit="cover"
                                :src="item.picture"
                                :preview-src-list="[item.picture]"
                            ></el-image>
                            <span v-else>暂无</span>
                        </td>
                        <td>{{item.period}}</td>
                        <!-- <td>{{item.price}}</td> -->
                        <td width="400">
                            <el-button type="primary" size="mini" @click="advertPeriodtime(item)">时段</el-button>
                            <el-button type="primary" size="mini" @click="edit(item)">修改</el-button>
                            <el-button type="danger" size="mini" @click="deleteItem(item.id)">删除</el-button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="pagination">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page.num"
                    :page-size="page.size"
                    layout="total, prev, pager, next"
                    :total="page.total"
                ></el-pagination>
            </div>
            <p class="noData" v-if="!list.length">暂无数据</p>
        </div>

        <!-- 时段dialog -->
        <el-dialog title="时段设置" :visible.sync="periodDialogVisible" width="750px">
            <div class="dialog-inner">
                <table class="time-table" border="0" cellpadding="0" cellspacing="0">
                    <thead>
                        <th>时段</th>
                        <th>时间</th>
                        <th>价格</th>
                    </thead>
                    <tr>
                        <td>A</td>
                        <td>
                            <p>09:00:00 至 17:00:00</p>
                        </td>
                        <td>
                            <input type="text" v-model="period.list[0].differPrice" />
                        </td>
                    </tr>
                    <tr>
                        <td>B</td>
                        <td>
                            <p>17:00:00 至第二日 09:00:00</p>
                        </td>
                        <td>
                            <input type="text" v-model="period.list[1].differPrice" />
                        </td>
                    </tr>
                </table>
                <el-button class="submit-btn" type="primary" @click="postPeriodData">提交</el-button>
            </div>
        </el-dialog>

        <!-- 新增、修改dialog -->
        <el-dialog title="添加修改广告位" :visible.sync="adDialogVisible" width="750px">
            <div class="dialog-inner">
                <el-form label-width="120px">
                    <el-form-item label="广告名称：">
                        <el-input v-model="form.name" size="medium" style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item label="广告类型：">
                        <el-select v-model="form.isbanner" placeholder="请选择" style="width: 220px">
                            <el-option label="首页banner广告" :value="1"></el-option>
                            <el-option label="首页分类广告" :value="2"></el-option>
                            <el-option label="二级分类banner广告" :value="3"></el-option>
                            <el-option label="商圈banner广告" :value="4"></el-option>
                            <el-option label="蜂团团banner广告" :value="5"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="广告类目：" v-if="form.isbanner === 2 || form.isbanner === 3">
                        <el-select v-model="categoryId" placeholder="请选择" style="width: 220px">
                            <el-option
                                v-for="item in categoryList"
                                :label="item.name"
                                :value="item.id"
                                :key="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item v-else label="广告编码：">
                        <el-input v-model="form.code" size="medium" style="width: 220px"></el-input>
                    </el-form-item>

                    <el-form-item label="广告描述：">
                        <el-input v-model="form.description" type="textarea" size="medium" style></el-input>
                    </el-form-item>
                    <el-form-item label="广告示例图：">
                        <div>
                            <ImgUploader v-model="form.picture" />
                        </div>
                    </el-form-item>
                    <el-form-item label="周期：">
                        <el-input v-model="form.period" size="medium" style="width: 220px"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="价格：">
                    <el-input v-model="form.price" size="medium" style="width: 220px"></el-input>
                    </el-form-item>-->
                </el-form>
                <el-button class="submit-btn" type="primary" @click="postData">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getCategoryList } from '@/api/common';
import * as request from "@/api/serviceManage";
import ImgUploader from "@/components/ImgUploader";
import { regExp } from "@/utils";
export default {
    components: {
        ImgUploader
    },
    data() {
        return {
            keyword: '',
            isSearch: false,
            page: {
                size: 10,
                num: 1,
                total: 0
            },
            list: [],
            categoryList: [],
            categoryId: '',

            fullscreenLoading: false,
            periodDialogVisible: false,
            adDialogVisible: false,
            type: 0,
            form: {
                id: '',
                name: '',
                isbanner: '',
                code: '',
                description: '',
                price: 0,
                period: '',
                picture: ''
            },
            period: {
                type: 0,
                id: '',
                list: [
                    {
                        code: 'A',
                        beginTime: '09:00:00',
                        endTime: '17:00:00',
                        differPrice: '',
                    },
                    {
                        code: 'B',
                        beginTime: '17:00:00',
                        endTime: '23:59:59',
                        differPrice: '',
                    },
                    {
                        code: 'C',
                        beginTime: '00:00:00',
                        endTime: '9:00:00',
                        differPrice: '0',
                    },
                ]
            }
        };
    },
    mounted() {
        this.getData();
        this.getCategoryList();
    },
    methods: {
        handleCurrentChange(val) {
            this.page.num = val;
            this.getData();
        },

        /* 获取列表数据 */
        async getData() {
            this.fullscreenLoading = true;
            let query = {
                code: this.keyword,
                num: this.page.num,
                size: this.page.size
            };
            try {
                const { errno, data, errmsg } = await request.selectadvertrule(query);
                if (errno === 0) {
                    this.list = data.list || [];
                    this.page.num = data.pageNum;
                    this.page.total = data.total;
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.error(err);
            }
            this.fullscreenLoading = false;
        },

        async getCategoryList() {
            try {
                const { errno, data } = await getCategoryList()
                if (errno === 0) {
                    this.categoryList = data.categoryList
                }
            } catch (err) {
                console.error(err)
            }
        },

        /* 添加or修改广告 */
        add() {
            this.type = 0
            this.form.name = ''
            this.form.code = ''
            this.form.isbanner = ''
            this.form.description = ''
            // this.form.price = ''
            this.form.period = ''
            this.form.picture = ''
            this.adDialogVisible = true
        },
        edit(item) {
            this.type = 1
            this.form.id = item.id
            this.form.name = item.name
            this.form.code = item.code
            if (item.isbanner === 2 || item.isbanner === 3) {
                this.categoryId = Number(item.code)
            }
            this.form.isbanner = item.isbanner
            this.form.description = item.description
            // this.form.price = item.price
            this.form.period = item.period
            this.form.picture = item.picture
            this.adDialogVisible = true
        },
        async postData() {
            if (!this.form.name) {
                return this.$message.warning("请输入广告名称");
            }
            if (!this.form.isbanner) {
                return this.$message.warning("请选择类型");
            }
            if ((this.form.isbanner === 1 || this.form.isbanner === 4) && !this.form.code) {
                return this.$message.warning("请输入编码");
            }
            if ((this.form.isbanner === 2 || this.form.isbanner === 3) && !this.categoryId) {
                return this.$message.warning("请选择类目");
            }
            if (!this.form.description) {
                return this.$message.warning("请输入广告简介");
            }
            if (!this.form.picture) {
                return this.$message.warning("请上传广告图");
            }
            if (!this.form.period) {
                return this.$message.warning("请选择时间");
            }
            if (!regExp.posInt(this.form.period)) {
                return this.$message.warning("请输入正整数");
            }
            // if (!this.form.price) {
            //     return this.$message.warning("请输入价格");
            // }
            const params = { ...this.form }
            if (this.form.isbanner === 2 || this.form.isbanner === 3) {
                params.code = this.categoryId
            }
            params.period = Number(params.period)
            if (this.type === 0) {
                delete params.id
            }
            try {
                const { errno, errmsg } = await request[this.type ? 'updateadvertrule' : 'insertadvertrule'](params)
                errno === 0 ? this.$message.success(errmsg) : this.$message.warning(errmsg)
                this.getData()
                this.adDialogVisible = false
            } catch (err) {
                console.error(err)
            }

        },
        async deleteItem(id) {
            try {
                await this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                const { errno, errmsg } = await request.deleteadvertrule({ id })
                errno === 0 ? this.$message.success(errmsg) : this.$message.warning(errmsg)
                this.getData()
            } catch (err) {
                console.error(err)
            }
        },

        async advertPeriodtime(item) {
            this.periodDialogVisible = true
            this.period.id = item.id
            if (item.siniAdvertPeriodtimes) {
                this.period.type = 1
                this.period.list = item.siniAdvertPeriodtimes.map(i => {
                    return {
                        id: i.id,
                        code: i.code,
                        begintime: i.begintime,
                        endtime: i.endtime,
                        differPrice: i.differprice
                    }
                })
            } else {
                this.period.type = 0
                this.period.list = [
                    {
                        code: 'A',
                        beginTime: '09:00:00',
                        endTime: '17:00:00',
                        differPrice: '',
                    },
                    {
                        code: 'B',
                        beginTime: '17:00:00',
                        endTime: '23:59:59',
                        differPrice: '',
                    },
                    {
                        code: 'C',
                        beginTime: '00:00:00',
                        endTime: '19:00:00',
                        differPrice: '0',
                    },
                ]
            }
        },
        async postPeriodData() {
            const params = {
                id: this.period.id,
                periodList: this.period.list
            }
            let method = 'post'
            if (this.period.type) {
                method = 'put'
            }
            try {
                const { errno, errmsg } = await request[this.period.type ? 'updateadvertPeriodtime' : 'insertadvertPeriodtime'](params, method)
                errno === 0 ? this.$message.success(errmsg) : this.$message.warning(errmsg)
                this.periodDialogVisible = false
                this.getData()
            } catch (err) {
                console.error(err)
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.header {
    padding: 30px 0 10px 20px;
    .keyword {
        width: 200px;
        margin-right: 10px;
    }
}
.table {
    width: 100%;
    th {
        height: 100px;
        font-weight: normal;
        border-bottom: 1px solid #ccc;
        font-size: 18px;
    }
    td {
        height: 80px;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        .img {
            width: 120px;
            height: 70px;
        }
    }
}

.noData {
    margin-top: 40px;
    text-align: center;
    color: #888;
}
.dialog-inner {
    margin-top: -20px;
    padding: 0 10px;
    .ad-cell {
        padding: 15px 0;
        span {
            display: inline-block;
            width: 100px;
            text-align: right;
        }
        input {
            width: 200px;
            height: 30px;
            border: 1px dashed #666;
            text-indent: 10px;
        }
        textarea {
            width: 500px;
            height: 80px;
            border: 1px dashed #666;
        }
    }
}
.pagination {
    margin: 25px 0;
    text-align: center;
}
.time-table {
    width: 100%;
    text-align: center;
    th {
        height: 60px;
        border-bottom: 1px solid #ccc;
    }
    td {
        height: 60px;
        border-bottom: 1px solid #ccc;
        input {
            width: 70px;
            height: 30px;
        }
    }
}
.submit-btn {
    display: block;
    width: 120px;
    margin: 30px auto 0;
}
</style>